<template>
  <div class="market">
    <h1>销售管理</h1>
    <el-input v-model="queryInfo.order_number" placeholder="订单号"></el-input>
    <!-- <el-input v-model="search.creationTime" placeholder="创建时间"></el-input> -->
    <el-date-picker
      v-model="queryInfo.date_time"
      type="date"
      placeholder="选择创建日期"
      @change="timeChange"
      clearable 
    >
    </el-date-picker>
    <el-button type="primary" icon="el-icon-search" @click="getMarket"
      >搜索</el-button
    >
    <el-button type="primary" @click="AddDialogFormVisible=true"
      >添加订单</el-button
    >
    <!-- <el-button @click="AddDialogFormVisible = true">添加订单</el-button> -->
    <!-- 展示商品 -->
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="450"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="45" align="center">
        </el-table-column>
        <el-table-column
          type="index"
          :index="1 + (queryInfo.page - 1) * queryInfo.size"
          label="编号"
          width="60"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="order_number"
          label="订单号"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="goods_info" label="商品清单" align="center">
          <template slot-scope="scope">
            <div v-for="(v, i) in scope.row.goods_info">{{ v.goods_name }} * {{ v.goods_number }}</div>
            
          </template>
        </el-table-column>
        <el-table-column
          prop="total_price"
          label="实付金额（元）"
          align="center"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="total_profit"
          label="利润（元）"
          align="center"
          sortable
        >
        </el-table-column>
        <el-table-column
          prop="sell_user_nickname"
          label="销售员"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="vip__name"
          label="购买会员"
          align="center"
        >
        <template slot-scope="scope">
            <span>{{scope.row.vip__name?scope.row.vip__name:'非会员购买'}}</span>
            
          </template>
        </el-table-column>
        
        <el-table-column
          prop="create_time"
          label="创建时间"
          align="center"
          width="200"
        >
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>


    <!-- 添加订单 -->
    <el-dialog title="添加订单" :visible.sync="AddDialogFormVisible" center>
      <el-form :model="addform">
        <el-form-item
          :label="'商品' + (index + 1)"
          v-for="(addgoods, index) in addform.goods_info"
          :key="addgoods.value"
          :label-width="formLabelWidth"
        >
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="10">
              <el-select
                v-model="addgoods.goods_id"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in goods"
                  :key="item.key"
                  :label="item.name"
                  :value="item.id+'+'+item.name"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-input-number
                v-model="addgoods.goods_number"
                :min="1"
               
                style="width: 130px; margin-right: 20px"
              ></el-input-number>
            </el-col>
            <el-col :span="6">
              <el-button
                
                @click.prevent="removeDomain(addgoods)"
                style="background-color: #f56c6c;"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button @click="addgoods" style="margin-left: 120px"
            >新增商品</el-button
          >
        </el-form-item>
        <el-form-item label="购买会员" :label-width="formLabelWidth">
          <el-select v-model="addform.vip_id" placeholder="" style="width: 480px;">
            <el-option
                  v-for="item in vipList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="addMarket()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getOrderList,getGoodsList,addOrder} from '@/api/goods'
import { getVipList } from '@/api/vip';
import dayjs from 'dayjs';
export default {
  data() {
    return {
      tableData: [],
      goods: [
        
      ],
      vipList:[],
      updateDialogVisible: false,
      AddDialogFormVisible: false,
      updateForm: {
        marketId: "",
        goods_info: "",
        totalPrices: 0,
        payment: "",
        creationTime: "",
      },
      addform: {
        goods_info: [
          {
   
            goods_number: 1,

          },
        ],
        
      },
      //表单宽度
      formLabelWidth: "120px",
      updateFormRulues: [],
      //查询信息实体
      queryInfo: {
        page: 1, //当前页
        size: 10, //每页最大数
      },
      total: 0, //总记录数
      //添加商品的list
      addgoodsList: [
        {
          goods_number: 1,
        },
      ],
    };
  },
  computed: {},
  methods: {
    timeChange(value) {
      // console.log(value);
      // if(value==null){
      //   this.queryInfo={...this.queryInfo,date_time:''}
      // }
    },
    //获取所有订单信息
    async getMarket() {
      let params = this.queryInfo;
      if(this.queryInfo.date_time){
        params={...this.queryInfo,date_time:dayjs(this.queryInfo.date_time).format('YYYY-MM-DD')}
      }
      getOrderList(params).then(res=>{
        this.tableData = res.data;
      this.total = res.total;
      })
      
    },
    //获取所有商品
    async getGoods() {
      getGoodsList({page:1,size:999}).then((res)=>{
        this.goods = res.data.filter((item)=>item.inventory>0)
      })
    },
    async getVip() {
      getGoodsList({page:1,size:999}).then((res)=>{
        this.goods = res.data
      })
    },

    //新增账单 下拉选择框值变化时 获取当前商品的单价
    getMoney(name, index, isDel) {
     
    },

    //最大数
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getMarket();
    },
    //pageNum的触发动作
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getMarket();
    },


    showUpdateDialog(currentData) {
      this.updateDialogVisible = true;
      this.updateForm = currentData;
    },
    closeUpdateDialog() {
      this.updateDialogVisible = false;
      this.getMarket();
    },
    //确认修改
   
    async addMarket() {
      this.dialogFormVisible = false;
      var reg = /[1-9][0-9]*/g
      var stringReg = /[\u4e00-\u9fa5]+/g
      this.addform = {...this.addform,goods_info:this.addform.goods_info.map((res)=>{
        return {
          ...res,
          // goods_id:res.goods_id.slice(0,1),
          goods_id: Number(res.goods_id.match(reg)[0]),
          // goods_name:res.goods_id.slice(3)
          goods_name: res.goods_id.match(stringReg)[0]
        }
      })}
      this.AddDialogFormVisible = false;
      addOrder(this.addform).then(()=>{
        this.$message.success("添加成功！");
        this.getMarket();
        this.addform = {
          goods_info: [
          {
   
            goods_number: 1,

          },
        ],
        }
      })
      
    },
    cancelAdd() {
      this.AddDialogFormVisible = false;
      this.addgoodsList = [
        {
          value: "",
          number: 1,
          money: "",
        },
      ];
    },
   
    removeDomain(item) {
        console.log('item',item)
    },
    //添加商品中的addgoodsList
    addgoods() {
      this.addform.goods_info.push({
        goods_number: 1,
        
      });
    },
    getVipName(id){
      // let t = this.vipList;
      // console.log('t.find((item)=>item.id=id)?.name',t.filter((item)=>item.id=id))
      // return t.find((item)=>item.id=id)?.name;
    }
  },
  created() {
    this.getMarket();
    //基于时间生成随机订单号
    this.getGoods();
    getVipList({page:1,size:999}).then((res)=>{
        
        console.log('this.vipList',res.data);
        this.vipList = res.data
      })
  },
};
</script>

<style lang="less" scoped>
.market {
  margin: 0 10px;
}
h1 {
  font-size: 24px;
  font-weight: 400;
  padding-bottom: 10px;
  color: #565758;
}
.market > .el-input {
  width: 150px;
  margin-right: 20px;
  margin-bottom: 40px;
}

.el-button {
  background: #4064e1;
  color: white;
}
.pagination {
  width: 400px;
  margin: 10px auto;
}
</style>
